<template>
	<view v-if="isRender">
		<view class="img-box">
			<image :src="`/static/images1/ck_${locale}.jpg`" style="width: 100%;border-radius: 12rpx;"></image>
		</view>
		<view class="form-box">
			<u-form labelPosition="top" labelStyle="color:#ffffff" :labelWidth="200" :model="formData">
				<u-form-item :label="getStr('mealCards')" prop="number">
					<u-input v-model="myCard.number" :disabled="true" disabledColor="#262930" color="#ffffff"
						placeholderStyle="color:#666666" border="none">
					</u-input>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="btn-box">
			<sysButton :text="getStr('useMealCard')" :handleChange="()=>modalShow = true"></sysButton>
		</view>
		
		<useMealCardModel :show="modalShow" title="" describe="" @close="modalShow = false"
			@confirm="addMealCard"></useMealCardModel>
	</view>
</template>

<script setup>
	import sysButton from '@/components/sysButton/index.vue'
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {getMealCards} from '@/common/api/common.js'
	import useMealCardModel from '@/components/confirmModal/myMealCard.vue'
	const isRender = ref(true)
	const myCard = ref({
		number:0
	})
	const modalShow  = ref(false)
	const locale = uni.getStorageSync('locale') || 'en'
	
	const useMealCardFn = () => {
		
	}
	
	const addMealCard = () => {
		
	}
	
	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}
	
	const getMealCardsFn = async () => {
		const res = await getMealCards({telegramId:uni.getStorageSync('telegramId')})
		if(res.code == 200){
			myCard.value = res.data
		}
	}
	onLoad(()=>{
		getMealCardsFn()
	})
	onShow(() => {
		uni.$tg.showButton()
		setIsRender()
	})
</script>

<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.img-box {
		width: calc(100vw - 28rpx - 28rpx);
		padding: 28rpx 0 0;
		margin: 0 auto;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.form-box {
		width: calc(100vw - 28rpx - 28rpx);
		padding-top: 56rpx;
		margin: 0 auto;
	
		::v-deep .u-form-item {
			margin-bottom: 20rpx;
	
			text {}
		}
	
		::v-deep .u-form-item__body__left {
			margin-bottom: 24rpx;
		}
	
		::v-deep .u-form-item {
			margin-bottom: 0;
		}
	
		::v-deep .u-form-item__body {
			padding: 0 0 50rpx;
		}
	
		::v-deep .u-input {
			background-color: #262930;
			height: 88rpx;
			padding: 0 18rpx 0 28rpx !important;
			box-sizing: border-box;
			font-size: 28rpx;
		}
	}
	
	.btn-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 0 auto;
	}
</style>